<template>
    <div class="province">
        <h3 class="title">应急仓各城区访问量</h3>
        <div class="proBarChart" id="proBarChart"></div>
        <div class="pie"><pro-pie/></div>
    </div>
</template>

<script>
import proPie from '../branch/proPie'
export default {
    components:{
        proPie
    },
    data(){
        return{
            myChart:{},
            option:{
                tooltip : {
                    trigger: 'axis',
                    axisPointer : { // 坐标轴指示器，坐标轴触发有效
                        type : 'line'// 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend:{
                    data:['96121','气象网'],
                    textStyle:{
                        color:function(value){}
                    },
                    right:'0',
                    top:'0',  
                    itemWidth:10,
                    itemHeight:10    
                },
                grid:{
                    left: '3%',
                    right: '4%',
                    top:'10%',
                    bottom:'5%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['天河','越秀','荔湾','海珠','白云','黄埔','花都','番禺','南沙','从化','增城'],
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#83D7F4',
                            }
                        },
                        axisLabel: {
                            color: '#7B8FB1'
                        },
                        axisTick: {
                            show:false,
                        },
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#83D7F4',
                            }
                        },
                        axisLabel: {
                            color: '#7B8FB1'
                        },
                        axisTick: {
                            show:false,
                        },
                    }
                ],
                series : [
                   {
                        type: 'bar',
                        barWidth: 18,
                        itemStyle:{
                            normal:{
                                color:(val)=>{
                                    return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, this.colorBar(val.value), false)
                                }
                            }
                        },
                        data: [192349,120000,90328,72399,34002,12320,11121,10000,9000,8000,7000]
                   }
                ]
            }
        }
    },
    methods:{
        init(){
            var proBarChart = document.getElementById('proBarChart')
            let fsize = document.body.clientWidth/1920*16
            proBarChart.style.height =document.body.clientWidth<=1920? fsize*22+'px':'22rem'
            // console.log(proBarChart.style.height)
            this.myChart = this.$echarts.init(proBarChart); 
            this.myChart.setOption(this.option)
        },
        colorBar(value){
           let max = Math.max.apply(null, this.option.series[0].data) 
           let oneUnit = max/5
           let multiple = Math.ceil(value/oneUnit)//倍数          
           let colores = ['#FF9200','#FF9200','#356CD5','#356CD5','#4D9DFF','#4D9DFF','#00DEFF','#00DEFF','#4EFFE7','#4EFFE7']
           let barArr = [
               [{offset:1},{offset:0}],
               [{offset:1},{offset:0.51},{offset:0.5},{offset:0}],
               [{offset:1},{offset:0.67},{offset:0.66},{offset:0.34},{offset:0.33},{offset:0}],
               [{offset:1},{offset:0.76},{offset:0.75},{offset:0.51},{offset:0.5},{offset:0.26},{offset:0.25},{offset:0}],
               [{offset:1}, {offset:0.81},{offset:0.8},{offset:0.61},{offset:0.6},{offset:0.41},{offset:0.4},{offset:0.21},{offset:0.2},{offset:0}]
           ]
           let itemColor = colores.slice(0,multiple*2)//每一条的颜色数量
           let colorArr = barArr[multiple-1]//每一条对应的颜色分段
           for(let i=0;i<colorArr.length;i++){
               colorArr[i].color = itemColor[i]
           }
           return colorArr
        }
    },
    mounted(){
        this.init()
    },
    destroyed(){
    }
}
</script>

<style lang="scss" scoped>
    .province{
        border:.05rem solid #597FBB;
        background: #040E31;
        margin-top:1.5rem;
        display:flex;
        flex-direction: column;
        position: relative;
        .title{
            height:2.3rem;
            width:13rem;
            line-height:2.3rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
        }
        .proBarChart{
            width:100%;
        }
        .pie{
            position:absolute;
            width:18rem;
            height:13rem;
            right:0;
            top:0;
        }
    }
</style>